<template>
  <div :class="{collapsed: collapse}">
    <div v-if="loading">
      <full-page-loading></full-page-loading>
    </div>
    <div class="framework" v-else-if="isFramework">
      <div class="sidebar">
        <logo :collapse="collapse" style="height: 52px;"></logo>
        <sidebar :collapse="collapse" style="height: calc(100% - 52px); border-right: 0"></sidebar>
      </div>
      <div class="content">
        <navigation
          :collapse="collapse"
          @toggleCollapse="toggleSidebar"></navigation>
        <div class="content-view">
          <div class="content-wrapper">
            <router-view></router-view>
          </div>
        </div>
      </div>
    </div>
    <div v-else>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import Logo from './components/logo'
import Sidebar from './components/sidebar'
import Navigation from './components/navigation'
import store from './utils/store.js'
import fullPageLoading from '@/components/plugins/full-page-loading'

export default {
  data () {
    return {
      loading: false,
      collapse: false
    }
  },
  mounted () {
    if (this.isFramework) {
      this.fetchData()
    }
    this.$event.on('reload-profile', () => {
      this.fetchData()
    })
    this.$event.on('goto-login', () => {
      this.gotoLogin()
    })
    this.$event.on('goto-logout', () => {
      this.gotoLogout()
    })
  },
  methods: {
    toggleSidebar () {
      this.collapse = !this.collapse
    },
    fetchData () {
      // console.log('reload data')
      this.loading = true
      this.api.getUser().then(res => {
        var user = res
        store.set('user', user)
        this.$event.emit('user-updated')
        this.loading = false
      }, err => {
        // this.loading = false
        console.error(err)
        store.delete('user')
        this.$event.emit('goto-login')
      })
      // 接口不通，先注释
      // this.api.getPolicyByUserAndSvc({ service: 'devops-go' }).then((res) => {
      //   store.set('userPolicy', res.policies)
      // }).finally(() => {
      //   this.loading = false
      // })
    },
    // 没有系统配置的界面了，这个接口也不通
    // getSystem () {
    //   this.api.getSystem().then(res => {
    //     var system = res.data
    //     store.set('system', system)
    //   })
    // },
    getSSOInfo () {
      this.loading = true
      return this.api.getSSOInfo().then(res => {
        var service = res.service
        var ssoUrl = res['sso_url']
        var appId = res.app_id
        var callbackUrl = res.callback
        let slash = [...ssoUrl].pop()
        slash !== '/' && (ssoUrl += '/')
        return {
          service: service,
          url: ssoUrl,
          callback: callbackUrl,
          appId: appId
        }
      })
    },
    gotoLogin () {
      this.getSSOInfo().then(data => {
        var {
          service, url, callback, appId
        } = data
        var newLocation = `${url}?service=${callback}&jumpto=${service}&appId=${appId}`
        window.location.href = newLocation
      })
    },
    gotoLogout () {
      this.getSSOInfo().then(data => {
        var { url } = data
        var callbackUrl = encodeURIComponent(window.location.protocol + '//' + window.location.host + '/logout')
        var newLocation = `${url}logout?callback=${callbackUrl}`
        window.location.href = newLocation
      })
    }
  },
  components: {
    Sidebar,
    Logo,
    Navigation,
    fullPageLoading
  },
  watch: {
    isFramework (newVal, oldVal) {
      if (newVal) {
        this.fetchData()
      }
    }
  },
  computed: {
    isFramework () {
      var excludes = [
        'Login',
        'Logout',
        'AuthCallback',
        null
      ]
      return !excludes.includes(this.$route.name)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import "~@/stylesheets/vars"
.framework {
  position: relative;
  background: #e5e9f2;
  > div {
    position: absolute;
    height: 100%;
    top: 0;
  }
  .sidebar {
    width: 200px;
    position: fixed;
    left: 0;
    .collapsed & {
      width: 64px;
    }
  }
  .content {
    width: calc(100% - 200px)
    left: 200px;
    position: relative;
    overflow: hidden;
    .collapsed &{
      width: calc(100% - 64px)
      left: 64px;
    }
    .content-view {
      padding: 20px 25px;
      background: #f1f1f1;
      position: relative;
      padding-top: 70px;
      height: 100vh;
      width: 100%;
      overflow: auto;
      .content-wrapper {
        min-width: 1000px;
      }
      .panel {
        // background: #fff;
        // padding: 15px;
      }
    }
  }
}
</style>
